<template>
	<view class="common-list u-f animate__animated animate__slideInLeft animate__fast">
		
		<view class="common-list__avatar">
			<image :src="item.user?.userpic" mode="widthFix" lazy-load></image>
		</view>
		<view class="common-list__content">
			<!-- 头部 -->
			<view class="common-list__header u-f-ac">
				<view class="u-f-ac">
					<text class="nick">{{item.user?.username}}</text>
					<tagSexAge :sex="item.user?.sex" :age="item.user?.age"/>
				</view>
				<view class="common-list__guanzhu">
					<text class="icon iconfont icon-tianjia" v-show="!item.guangzhu" @tap="guanzhu">关注</text>
					<text  class="icon iconfont icon-tianjia"></text>
				</view>
				
			</view>
			<!-- 标题 -->
			<view class="common-list__title" @tap="opendetails">
				<text>{{item.title}}</text>
			</view>
			<!-- 主体 -->
			<view class="common-list__c" @tap="opendetails">
				<template v-if="!item.share">
					<!-- 图片 -->
					<image :src="item.titlepic" mode="widthFix" lazy-load></image>
					<!-- 视频 -->
					<view class="common-list-play icon iconfont icon-bofang2" v-if="item.video"></view>
					<view class="common-list-playinfo"  v-if="item.video">
						{{item.video.looknum}}次播放  {{item.video.long}}
					</view>
				</template>
				<template v-else>
					<!-- 分享 -->
					<view class="common-list-share u-f-ac" v-if="item.share">
						<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
						<text>{{item.share.title}}</text>
					</view>
				</template>
			</view>
			<!-- 底部 -->
			<view class="common-list-footer u-f-ac">
				<text>{{item.path}}</text>
				<view class="commom-list__caozuo">
					<text class="icon iconfont icon-zhuanfa">{{item.sharenum}}</text>
					<text class="icon iconfont icon-pinglun">{{item.commentCount}}</text>
					<text class="icon iconfont icon-dianzan">{{item.diangCount}}</text>
				</view>	
			</view>
		</view>
	</view>
					
</template>

<script setup>
	import { reactive,onMounted,ref} from "vue";
	import tagSexAge from './tag-sex-age.vue'
	const props = defineProps({
		item:{
			type:Object,
			required:true,
		}
	})
	// 关注
	function guanzhu(){
		props.item.isguanzhu = true;
		uni.showToast({
			title:"关注成功",
		})
	}
	
	// 详情页面
	function opendetails(){
		uni.navigateTo({
			url:"/pages/detail/detail?id="+props.item?.id+'&title'+props.item.title
		})
	}
	
</script>

<style lang="scss" scoped>
.common-list {
		width: 100%;
		box-sizing: border-box;
		padding: 20upx 50upx;
		border-bottom: 1upx solid #ccc;
		
		&__avatar {
			>image{
				width: 50upx;
			}
			margin-right: 15upx;
			
		}
		
		&__c{
			position: relative;
			image {
				width: 100%;
			}
		}
		&__content{
			flex: 1;
			.common-list__header{
				justify-content: space-between;
				
				
				
			}
			.common-list__title{
				margin: 20upx 0;
				>text {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 30upx;
					overflow: hidden;
				}
				
			}
			
			.common-list-share {
				margin: 15upx 0;
				padding: 15upx 5upx;
				background-color: #f1f2f6;
				image {
					width: 60upx;
					margin-right: 20upx;
				}
				text{
					flex: 1;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					font-size: 30upx;
					color: black;
					overflow: hidden;
					padding: 0 10upx;
				}
			}
		}
		
		&__guanzhu{
			>text{
				margin-right: 10upx;
				&:first-of-type {
					padding: 8upx 17upx;
					font-size: 25upx;
					background-color: #eee;
				}
				&:last-of-type{
					color: #ccc;
					transform: rotate(60deg);
				}
			}
		}
		
		.nick {
			color: #ccc;
			margin-right: 10upx;
		}
		
		&-footer{
			justify-content: space-between;
			color: #AAAAAA;
			.commom-list__caozuo {
				>text {
					color: #AAAAAA;
					margin: 0 14upx;
					font-size: 26upx;
					text-indent: 10upx;
					
				}
			}
		}
	
		&-play{
			position: absolute;
			top: 50%;
			left: 50%;
			color: white;
			font-size: 130upx;
			transform: translate(-50%,-50%);
		}
		&-playinfo{
			position: absolute;
			bottom: 3%;
			right: 4%;
			color: white;
			border-radius: 30upx;
			background-color: rgba(0,0,0,.3);
			padding: 4upx 15upx;
			font-size: 20upx;
		}
	}
	
</style>
